<?php
/**
 * aheadWorks Co.
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the EULA
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://ecommerce.aheadworks.com/LICENSE-M1.txt
 *
 * @category   AW
 * @package    AW_Mobile
 * @copyright  Copyright (c) 2010-2011 aheadWorks Co. (http://www.aheadworks.com)
 * @license    http://ecommerce.aheadworks.com/LICENSE-M1.txt
 */
?>
<?php $_product = $this->getProduct() ?>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/swipe.js') ?>"></script>
<div class="product-image prof">
	<!-- widget-litb-m-prodImg -->
	<div id="porductInfoPrImage" class="prodcutPageprImg proImgSizeA">
		<div id="canvas" class="canvas">
			<div id="slider" class="slider">
				<ul></ul>
			</div>
			<nav id="nav-image" class="nav">
			<a id="back" class="back textbtn">&lt;&nbsp;Back</a>
				<a id="bigImg" class="bigImg"></a>
				<em id="page" class="page"></em> 
				<em id="prev" class="prev" onclick='slider.prev();'></em> 
				<em id="next" class="next" onclick='slider.next();'></em>
			</nav >
		</div>
	</div>
	<!-- widget-litb-m-prodImg_eof -->
	<div class="product-image-li">
		<div class="photo-num"><a href="#">Photos (<?php echo count($this->getGalleryImages())?>)</a></div>
		<div class="product-video-list"><a href="<?php echo $this->getUrl('video-list') ?>">Video</a></div>
		<div class="clear"></div>
	</div>
</div>
<script type="text/javascript">
<?php
	foreach ($this->getGalleryImages() as $_image):
		$images[] = '["'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(300).'","'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(300).'"]';
	endforeach;
?>
var jsonImages = [<?php echo implode(',',$images);?>];
var noImg = 0;
var slider = new Swipe($j('#slider')[0], {
   	auto: 1000,
	image:jsonImages,
	scroll: true,
	page:$j('#page')[0],
	bigImg:$j('#bigImg')[0],
	callback: function(e, pos) {noImg = pos;}
});
$j("#slider").bind("click",showOverlay);
$j("#back").bind("click",hideOverlay);

function showOverlay(){
	$j("body>section").addClass("sectionCss");
	$j("#header").hide();
	$j("#footer").hide();
	$j("#porductInfoPrImage").prevAll().hide(); 
	$j("body").prepend('<div id="boxOverlay"></div>');
	$j("#nav-image a").show();
	$j("body").addClass("bodyCss");
	$j("#boxOverlay").css({'height':Math.max($j("body").height(),pageHeight()),'width':$j("body").width()}).show();
	$j("#slider").unbind( "click" );
	$j("#canvas").addClass("canvasBig");
	sizeAuto(300);
}
function hideOverlay(){
	$j("#header").show();
	$j("#footer").show();
	$j("body>section").removeClass("sectionCss");
	$j("#porductInfoPrImage").prevAll().show();
	$j("#boxOverlay").remove();
	$j("#nav-image a").hide(); 
	$j("#slider").bind("click",showOverlay);
	$j("#canvas").removeClass("canvasBig");
	$j("body").removeClass("bodyCss");
	sizeAuto(260);
	return false;
}

function sizeAuto(s){
	$j("#slider ul")[0].style.msTransform = $j("#slider ul")[0].style.MozTransform = $j("#slider ul")[0].style.OTransform = 'translateX(' + -(noImg* s) + 'px)';
	$j("#slider ul")[0].style.webkitTransform = 'translate3d(' + -(noImg* s) + 'px,0,0)';
	$j("#slider li").css({"width":s});
	$j("#slider ul").css({"width":s*jsonImages.length});
}
$j(window).resize(function() {
	$j("#boxOverlay").css({'height':Math.max($j("body").height(),pageHeight()),'width':$j("body").width()});
});

$j('.photo-num').click(function(){
	$j("#slider").click();
});

</script> 

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views" style="display:none;">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>